<html>
<head>
<title>ECOTree Simple Tree 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="ECOTree.js"></script>
<link type="text/css" rel="stylesheet" href="ECOTree.css" />
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style>v\:*{ behavior:url(#default#VML);}</style> 
<style>
.copy {
font-family : "Verdana";	
font-size : 10px;
color : #CCCCCC;
}
</style>

<script>
function log(msg) {
$("#log").append(msg+"<br/>");	
}
 
var myTree = null;

function CreateTree() {
myTree = new ECOTree('myTree','myTreeContainer');	
myTree.config.iRootOrientation = ECOTree.RO_LEFT;	
myTree.config.render = "CANVAS";	
 
myTree.add(0,-1,"Apex Node");
myTree.add(1,0,"Left Child");
myTree.add(2,0,"Right Child");
for (i = 0 ; i < 5 ; i++) {
myTree.add(i+3,0,""+i);
log(""+i);
}
myTree.UpdateTree();

var canvas = document.getElementById("ECOTreecanvas");
var context = canvas.getContext("2d");
var img = canvas.toDataURL("image/png");
jQuery("#img").attr("src",img);
 
}	
</script>	
</head>
<body onload="CreateTree();">
<h4>ECOTree Simple Tree 1&nbsp;<span class="copy">&copy;2006 Emilio Cortegoso Lobato</span></h4>
<div id="myTreeContainer">
</div>
<div id="log"></div>
<img id="img"/>
</body>
</html>